<template>
	<!-- 组织 -->
	<view class="organzation-container">
		<!-- 导航区 -->
		<SearchHeader placeholder="搜索组织名称" @setSearchValue="getSearchValue">
			<!-- 右侧图标 -->
			<template #right>
				<view class="icon">
					<!-- 新建组织 -->
					<navigator url="/pages/New_Organization/New_Organization">
						<u-icon name="plus-circle" size="44rpx" color="#333"></u-icon>
					</navigator>
				</view>
			</template>

			<!-- tabs区 -->
			<template #tabs>
				<view class="mytabs">
					<u-tabs :list="tabsList" lineWidth="60rpx" lineHeight="4rpx" :inactiveStyle="{
						fontSize: '28rpx',
						fontFamily: 'Source Han Sans CN-Regular, Source Han Sans CN',
						fontWeight: 400,
						color: '#999999',
						lineHeight: '37rpx'}" :activeStyle="{
						fontSize: '28rpx',
						fontFamily: 'Source Han Sans CN-Medium, Source Han Sans CN',
						fontWeight: 500,
						color: '#333',
						lineHeight: '37rpx'
					}" @change="handleTabs"></u-tabs>
				</view>
			</template>
		</SearchHeader>

		<!-- 索引列表 -->
		<u-index-list :index-list="indexList">
			<view v-for="(item, index) in itemArr" :key="index">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<navigator class="list-cell" v-for="(cell, i) in item" :key="cell"
						:url="'/pages/Organizational_details/Organizational_details?id='+cell.id">
						<view class="img">
							<image :src="'http://alumnus.biaoxufilm.com'+cell.avatar" mode="widthFix"></image>
						</view>
						<view class="r">
							<view class="title">{{cell.name}}</view>
							<view class="shu">成员：{{cell.first_letter}}</view>
						</view>
					</navigator>
				</u-index-item>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import SearchHeader from '@/componets/SearchHeader/SearchHeader.vue'
	export default {
		data() {
			return {
				// tabs列表
				tabsList: [{
					type: 1,
					name: '推荐'
				}, {
					type: 2,
					name: '全部'
				}, {
					type: 3,
					name: '院系'
				}, {
					type: 4,
					name: '地方'
				}],

				// tabs值
				type: 1,

				// 搜索框的值
				name: '',

				// 组织列表
				indexList: [],
				itemArr: [],
			}
		},
		onShow() {
			this.getOrganizationList()
		},
		methods: {

			/**
			 * 搜索组织名称
			 */
			getSearchValue(value) {
				this.name = value
				this.getOrganizationList()
			},

			/**
			 * 点击了tabs
			 * @param {object} value 点击的tabs项具体内容
			 */
			handleTabs(value) {
				this.type = value.type
				this.getOrganizationList()
			},

			/**
			 * 获取组织列表
			 */
			getOrganizationList() {
				this.indexList = []
				this.itemArr = []
				this.$request.post({
					url: '/api/organization/list',
					data: {
						type: this.type,
						name: this.name
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})

						let data = res.result.sort((a, b) => {
							return a.first_letter < b.first_letter ? -1 : a.first_letter > b.first_letter ? 1 : 0
						})
						let arr = []
						for (let item of data) {
							arr.push(item.first_letter)
						}
						this.indexList = [...new Set(arr)]
						let arr1 = []
						for (let item of this.indexList) {
							arr1 = []
							for (let ite of data) {
								if (item == ite.first_letter) {
									arr1.push(ite)
								}
							}
							if (arr1.length == 0) return
							this.itemArr.push(arr1)
						}
					}
				})
			},


			click(e) {
				console.log('点击列表回调：', e)
				uni.navigateTo({
					url: '/pages/Organizational_details/Organizational_details'
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/New_Organization/New_Organization'
				})
			}
		},
		components: {
			SearchHeader
		},
	}
</script>

<style lang="less" scoped>
	.organzation-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;

		.icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 42rpx;
			margin-right: 200rpx;

		}

		.mytabs {
			width: 100%;
			overflow: hidden;
			border-bottom: 2rpx solid #f1f1f1;

			/deep/.u-tabs__wrapper__nav__item {
				padding: 0 54rpx !important;
			}
		}

		.list-cell {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.img {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 20rpx;

				>image {
					width: 100%;
				}
			}

			.r {
				flex: 1;
				height: 92rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.title {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
				}

				.shu {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
					letter-spacing: 1px;
				}
			}
		}
	}
</style>